<template>
  <div style="height: 100%;">
    <div v-show="showLevel">
      <div v-if="height == 'small' && !special.includes(specialAttr)  "
           class="rating-key"
           style="border:0px;margin:0px;padding: 4px 0px 10px 0px;">
        <table class="rating-table">
          <tbody>
            <tr>
              <th class="width-12_5">
                <span class="term"></span>
                <br>
              </th>
              <td>
                <div class="flex fill margin-0">
                  <div class="item item-img "
                       v-for=" rating in viewCurrent.ratings"
                       :key="rating.name"
                       :class="rating.className">
                    {{getTranslate(rating.name.split(' ')[0])}}<br>{{getTranslate(rating.name.split(' ')[1])}}
                  </div>

                </div>

              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="height == 'small' && specialAttr == 'eld'"
           class="rating-key eld"
           style="border:0px;margin:0px;padding: 4px 0px 10px 0px;">
        <table class="rating-table rating-table-eld width-100">
          <tbody>
            <tr>
              <th class="width-12_5">
                <!-- $t("loc.ratingPeriod")  $t("loc.ofChild")-->
                <span class="term"> {{getTranslate("Rating Period")}}
                  <br>{{getTranslate("(# of Child)")}}</span>
                <br>
              </th>
              <td>
                <!-- $t('loc.dl')  $t('loc.de') $t('loc.ee') $t('loc.deve') $t('loc.be') $t('loc.ie')-->

                <div class="flex fill margin-0 width-80">
                  <div class="item item-img" v-for="(className, index) in eldClass" :key="className" :class="className">
                    <span> {{ getTranslate( eldDefaultData[index].split(' ')[0]) }} <br> {{ getTranslate(eldDefaultData[index].split(' ')[1]) }}</span>
                  </div>
                  <!--
                  <div class="dl item item-img">
                    <span>{{getTranslate("Discovering Language")}}</span>
                  </div>
                  <div class="de item item-img">
                    <span>{{getTranslate("Discovering English")}}</span>
                  </div>
                  <div class="ee item item-img">
                    <span>{{getTranslate("Exploring English")}}</span>
                  </div>
                  <div class="deve item item-img">
                    <span>{{getTranslate("Developing English")}}</span>
                  </div>
                  <div class="be item item-img">
                    <span>{{getTranslate("Building English")}}</span>
                  </div>
                  <div class="ie item item-img">
                    <span>{{getTranslate("Integrating English")}}</span>
                  </div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="height == 'small' && specialAttr == 'span'"
           class="rating-key span"
           style="border:0px;margin:0px;padding: 4px 0px 10px 0px;">
        <table class="rating-table rating-table-span width-100">
          <tbody>
            <tr>
              <th class="width-12_5">
                <!-- $t("loc.ratingPeriod")  $t("loc.ofChild")-->
                <span class="term"> {{getTranslate("Rating Period")}}
                  <br>{{getTranslate("(# of Child)")}} </span>
                <br>
              </th>
              <td>
                <!-- $t('loc.ds')  $t('loc.es') $t('loc.devs') $t('loc.bs') $t('loc.ins') -->

                <div class="flex fill width-80">
                  <div class="item item-img" v-for="(className, index) in spanClass" :key="className" :class="className">
                    <span> {{ getTranslate( spanDefaultData[index].split(' ')[0]) }} <br> {{ getTranslate(spanDefaultData[index].split(' ')[1]) }}</span>
                  </div>
                  <!-- <div class="ds item item-img">
                    <span>{{getTranslate("Discovering Spanish")}}</span>
                  </div>
                  <div class="es item item-img">
                    <span>{{getTranslate("Exploring Spanish")}}</span>
                  </div>
                  <div class="devs item item-img">
                    <span>{{getTranslate("Developing Spanish")}}</span>
                  </div>
                  <div class="bs item item-img">
                    <span>{{getTranslate("Building Spanish")}}</span>
                  </div>
                  <div class="is item item-img">
                    <span>{{getTranslate("Integrating Spanish")}}</span>
                  </div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <table v-if="!special.includes(specialAttr) && aliasData && levelTemplates"
           class="query_level_1 rating-table"
           style="margin:0;">

      <tbody>
        <tr>

          <th class="width-12_5">
            <span class="term aliasFont"
                  :class="showAllAlias && aliasData.alias == viewCurrent.displayAlias ?'currentAlias':''">{{getTranslate(aliasData.alias)}} <br /> {{aliasData.count ? '(n='+aliasData.count+')':''}}</span>
            <br>
          </th>

          <td>
            <div class="flex fill margin-0 margin-b-12">

              <div class="score"
                   :style="{
                  'left':aliasData.scoreLeft+'%',
                  '--width':symbolWidth,
                  'height': heightStyle
                }"
                   style="z-index:1;"></div>

              <div v-if="symbol"
                   class="error"
                   :style="{
                  'left':aliasData.stdErrorLeft+'%',
                  'width':aliasData.stdErrorWidth+'%',
                  '--top':symbolTop,
                  '--height':symbolHeights

                }"
                   style="z-index:1;"></div>

              <div v-for="(level,index) in levelTemplates"
                   :key="index"
                   class="item item-img "
                   :class="level"
                   :style="{'height':heightStyle}">
              </div>
              <div v-show="precentText"
                   v-for="(level,index) in aliasData.levelDataList"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level.className"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">{{level.percentage+'%('+level.count+')'}}</span>
              </div>

            </div>
          </td>
        </tr>
        <tr v-for="(data,index) in aliasData.filterCohortList"
            :key="index">
          <th class="width-12_5 padding-left-25 padding-bottom-6">
            <span class=" aliasFont ">{{getTranslate(data.name)}} <br /> {{'(n='+data.count+')'}}</span>
          </th>
          <td v-if="data.scoreLeft != 0">
            <div class="flex fill margin-0 margin-b-12 "
                 title="">
              <div class="score"
                   :style="{
                      'left':data.scoreLeft+'%',
                      '--width':symbolWidth,
                    }"
                   style="z-index:1;"></div>

              <div v-if="symbol"
                   class="error"
                   :style="{
                      'left':data.stdErrorLeft+'%',
                      'width':data.stdErrorWidth+'%',
                      '--top':symbolTop,
                      '--height':symbolHeights
                    }"
                   style="z-index:1;"></div>
              <div v-for="(level,index) in data.levelDataList.map(x=>x.className)"
                   :key="index"
                   class=" item item-img"
                   :class="level"
                   :style="{'height':attrCompareHeight}">
              </div>
              <!-- 10%（20）数值展示 -->
              <div v-show="precentText"
                   v-for="(level,index) in data.levelDataList"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level.className"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">{{level.percentage+'%('+level.count+')'}}</span>
              </div>
              <!-- <div v-show="precentText"
                   v-for="(level,index) in levelTemplates"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">0%</span>
              </div> -->

            </div>
          </td>
          <td v-else>
            <div class="flex fill margin-0 margin-b-12">
              <div class="item item-img no-results"
                   :style="{'height':attrCompareHeight}">
                {{getTranslate('No Score Available')}}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <table v-if=" special.includes(specialAttr) && aliasData && levelTemplates"
           class="query_level_1 rating-table rating-table-eld width-100"
           :class="specialAttr == 'eld'?'rating-table-eld':'rating-table-span'"
           style="margin:0;">
      <tbody>
        <tr>
          <th class="width-12_5">
            <span class="term aliasFont"
                  :class="showAllAlias && aliasData.alias == viewCurrent.displayAlias ?'currentAlias':''"> {{getTranslate(aliasData.alias)}} <br />{{aliasData.count ? '(n='+aliasData.count+')':''}}</span>
          </th>
          <td>
            <div class="flex fill margin-0 width-80 margin-b-12 overflowHidden">
              <div class="score"
                   :style="{
                      'left':aliasData.scoreLeft+'%',
                      '--width':symbolWidth,
                      'height': heightStyle
                    }"
                   style="z-index:1;"></div>

              <div v-if="symbol"
                   class="error"
                   :style="{
                      'left':aliasData.stdErrorLeft+'%',
                      'width':aliasData.stdErrorWidth+'%',
                      '--top':symbolTop,
                      '--height':symbolHeights

                    }"
                   style="z-index:1;"></div>
              <div v-for="(level,index) in levelTemplates"
                   :key="index"
                   class=" item item-img"
                   :class="level"
                   :style="{'height':heightStyle}">
              </div>
              <!-- 10%（20）数值展示 -->
              <div v-show="precentText"
                   v-for="(level,index) in aliasData.levelDataList"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level.className"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">{{level.percentage+'%('+level.count+')'}}</span>
              </div>
              <!-- <div v-show="precentText"
                   v-for="(level,index) in levelTemplates"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">0%</span>
              </div> -->

            </div>
          </td>
        </tr>
        <tr v-for="(data,index) in aliasData.filterCohortList"
            :key="index">
          <th class="width-12_5 padding-left-25 padding-bottom-6">
            <span class=" aliasFont ">{{getTranslate(data.name)}} <br /> {{'(n='+data.count+')'}}</span>
          </th>
          <td v-if="data.scoreLeft != 0">
            <div class="flex fill margin-0 width-80 margin-b-12 overflowHidden">
              <div class="score"
                   :style="{
                      'left':data.scoreLeft+'%',
                      '--width':symbolWidth,
                    }"
                   style="z-index:1;"></div>

              <div v-if="symbol"
                   class="error"
                   :style="{
                      'left':data.stdErrorLeft+'%',
                      'width':data.stdErrorWidth+'%',
                      '--top':symbolTop,
                      '--height':symbolHeights

                    }"
                   style="z-index:1;"></div>
              <div v-for="(level,index) in data.levelDataList.map(x=>x.className)"
                   :key="index"
                   class=" item item-img"
                   :class="level"
                   :style="{'height':attrCompareHeight}">
              </div>
              <!-- 10%（20）数值展示 -->
              <div v-show="precentText"
                   v-for="(level,index) in data.levelDataList"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level.className"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">{{level.percentage+'%('+level.count+')'}}</span>
              </div>
              <!-- <div v-show="precentText"
                   v-for="(level,index) in levelTemplates"
                   :key="index"
                   class="block-z-index text-center item item-img "
                   :class="level"
                   :style="{'height':'20px'}"
                   style="background-color: #fff !important;">
                <span style="vertical-align: -6px;">0%</span>
              </div> -->

            </div>
          </td>
          <td v-else>
            <div class="flex fill margin-0 margin-b-12">
              <div class="item item-img no-results "
                   :style="{'height':attrCompareHeight}">
                {{getTranslate('No Score Available')}}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <table v-if=" !levelTemplates"
           class="query_level_1 rating-table width-100"
           style="margin:0;">
      <tbody>
        <tr>
          <th class="width-12_5">
            <span class="term aliasFont"
                  :class="showAllAlias && aliasData.alias == viewCurrent.displayAlias ?'currentAlias':''"> {{aliasData && aliasData.alias ? getTranslate(aliasData.alias) : getTranslate(viewCurrent.displayAlias) }} <br /> {{ aliasData && aliasData.count ? '(n='+aliasData.count+')':''}}</span>
          </th>
          <td>
            <div class="flex fill margin-0 margin-b-12">
              <div class="item item-img no-results padding-top-5"
                   :style="{'height':heightStyle}">
                {{getTranslate('No Score Available')}}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  name: 'proportionBar',

  //  1. noData  无数据时显示灰色进度条
  //  2. attrCompare 属性对比
  props: {
    showAllAlias: {
      type: Boolean,
      default: false
    },
    showLevel: {
      type: Boolean,
      default: true
    },
    showType: {
      type: String,
      default: 'default'
    },
    // 1. medium 正常高度 30px
    // 2. small   25px
    // 3. mini    10px
    height: {
      type: String,
      default: 'medium'
    },
    // 是否显示 横线 符号
    symbol: {
      type: Boolean,
      default: false
    },
    // 是否有偏差值   具体表现为 占比条刻度 是否有横线
    offset: {
      type: Boolean,
      default: false
    },
    // 是否有进度条下面占比文本  例  10%（20）
    precentText: {
      type: Boolean,
      default: false
    },
    // 刻度线
    aliasData: {
      type: Object
    },
    // 动态占比条样式
    levelTemplates: {
      type: Array
    },
    // 特殊领域属性 （需要做特殊处理）
    specialAttr: {
      type: String
    },
    // 占比条颜色  view
    viewCurrent: {
      type: Object
    },
    getTranslate: {
     type: Function,
     default: (message) => { return message }
    }
  },
  data () {
    return {
      precent: ['12%', '14%', '16%', '8%', '6%', '14%', '15%', '10%', '5%'],
      defaultPrecent: [],
      eldDefaultData: [],
      spanDefaultData: [],
      eldClass: ['dl','de','ee','deve','be','ie'],
      spanClass: ['ds','es','devs','bs','ins'],
      colour: [
        '#FFE4BB',
        '#FFD28E',
        '#D7EFE3',
        '#C2E6D2',
        '#76CA73',
        '#DAE4EE',
        '#B5CCDD',
        '#80ABC7',
        '#EAE0EE'
      ],
      flag: false,
      // 占比条高度
      heightStyle: null,
      // 横线高度
      symbolHeights: null,
      // cohort 属性对比高度
      attrCompareHeight: null,
      symbolTop: null,
      offsetSymbol: 0,
      symbolWidth: null,
      kk: 50,
      special: ['eld', 'span']
    }
  },
  created () {
    // 是否有偏差值
    if (this.offset) {
      this.offsetSymbol = 1 + 'px'
    }
    // $t('loc.dl')  $t('loc.de') $t('loc.ee') $t('loc.deve') $t('loc.be') $t('loc.ie')
    // $t('loc.ds')  $t('loc.es') $t('loc.devs') $t('loc.bs') $t('loc.ins')
    // Discovering Language Discovering English Exploring English Developing English Building English Integrating English-->
    // Discovering Spanish Exploring Spanish Developing Spanish Building Spanish Integrating Spanish-->
    this.eldDefaultData = [
      'Discovering Language',
      'Discovering English',
      'Exploring English',
      'Developing English',
      'Building English',
      'Integrating English'
    ]
    this.spanDefaultData = [
      'Discovering Spanish',
      'Exploring Spanish',
      'Developing Spanish',
      'Building Spanish',
      'Integrating Spanish'
    ]
    // 默认平均分  弃用
    // if (this.showType == 'default' || this.showType == 'all') {
    //   this.defaultPrecent = new Array(this.precent.length).fill(
    //     100 / this.precent.length + '%'
    //   )}
  },
  mounted () {
    // 设置符号的 高   具体表现为横线的消失
    this.symbolHeights = this.symbol ? '1px' : '0px'
    //  this.precentText = true

    // 初始化占比条宽高
    if (this.height == 'medium') {
      this.symbolWidth = '3px'
      this.symbolTop = '20px'
      this.heightStyle = '30px'
    } else if (this.height == 'small') {
      this.symbolWidth = '3px'
      this.symbolTop = '15px'
      this.heightStyle = '25px'
    } else if (this.height == 'mini') {
      this.symbolWidth = '3px'
      this.symbolTop = '15px'
      this.heightStyle = '30px'
      this.attrCompareHeight = '16px'
    }
    //  this.heightStyle = '15px'
  },

  methods: {
    myInterval () {
      if (this.showType == 'proportion' || this.showType == 'all') {
        console.log('----------' + this.kk)

        this.$refs.schedule.style.right = '-' + this.kk-- + '%'
        if (this.kk != 0) {
          this.$nextTick(function () {
            setTimeout(this.myInterval, 100)
          })
        }
      }
    },
    action () {
      if (this.flag) {
        //  this.precent = ["12%", "14%", "16%", "8%", "6%", "14%", "15%", "15%"];
        this.$refs.schedule.style.right = -50 + '%'
        this.heightStyle = '40px'
        this.top = '-45px'
      } else {
        //  this.precent = ["40%", "4%", "16%", "8%", "2%", "14%", "15%", "1%"];
        this.$refs.schedule.style.right = -80 + '%'
        //  this.heightStyle = "20px";
        //  this.top = "-25px";
      }
      this.flag = !this.flag
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.x {
  width: 15px;
  height: 15px;
}
.x::before {
  content: '';
  position: absolute;
  height: var(--heights);
  width: 3px;
  top: var(--top);
  right: 20px;
  background: black;
}
#report table.rating-table td .flex.fill .error {
  position: absolute;
  top: var(--top);
  height: var(--height);
  background-color: #000;
}

#report table.rating-table td .flex.fill .median,
#report table.rating-table td .flex.fill .score {
  position: absolute;
  top: 0px;
  width: var(--width);
  height: 33px;
  background-color: #000 !important;
}

.x::after {
  content: '';
  position: absolute;
  height: var(--heights);
  width: var(--offsetSymbol);
  top: var(--top);
  right: 20px;
  background: black;
}
.x::before {
  transform: rotate(180deg);
}
.x::after {
  transform: rotate(-90deg);
}

.medium-td {
  display: inline-block;
  height: var(--heights);
}
.min-td {
  border-right: 2px solid #e8edf0;
  display: inline-block;
  height: var(--heights);
}
</style>

<style scoped lang="less">
.border-r {
  border-right: 2px solid #e8edf0;
}
.margin-bot {
  margin-bottom: 6px;
}
.medium {
  position: relative;
  right: -1%;
}
tbody {
  display: table;
  width: 100%;
}
.margin-0 {
  margin: 0 !important;
}

.block-z-index {
  z-index: 1;
}
.width-12_5 {
  width: 12.5% !important;
}
.margin-b-12 {
  margin-bottom: 12px !important;
}
.width-100 {
  width: 100% !important;
}
.width-80 {
  width: 80% !important;
}
.aliasFont {
  font-size: 13px;
  font-family: 'Roboto';
  line-height: 16px;
}
.padding-left-25 {
  padding-left: 25px !important;
}
.padding-bottom-6 {
  padding-bottom: 6px !important;
}
.padding-top-5 {
  padding-top: 5px !important;
}
.currentAlias {
  color: #10b3b7;
}
</style>
